<template>
  <!--  配置弹窗 -->
  <el-dialog class="dia-style" :title="title" :visible.sync="isOpen" width="60%" append-to-body>
    <div class="email-dia">
      <aside>
        <div class="option-group">
          <li
            @click="islink = 0"
            :class="islink == 0 ? 'activeLink' : ''"
            href="#jichu"
          >
            接入数据源配置
          </li>
          <li
            @click="islink = 1"
            :class="islink == 1 ? 'activeLink' : ''"
            href="#email"
          >
            输出数据源配置
          </li>
        </div>
      </aside>

      <el-form
        class="dia-form"
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="127px"
      >
        <div v-show="islink==0">
          <el-col :span="24">
            <div class="tips" name="jichu">网御星云防火墙</div>
          </el-col>
          <el-col :span="24">
            <el-form-item label="数据源名称" prop="field101">
              <el-input
                v-model="formData.field101"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="syslog发送端IP" prop="field102">
              <el-input
                v-model="formData.field102"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="syslog服务IP" prop="field103">
              <el-input
                v-model="formData.field103"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="syslog监听端口" prop="field105">
              <el-input
                v-model="formData.field105"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </div>
        <div v-show="islink==1">
          <el-col :span="24">
            <div class="tips" name="email">网御星云防火墙</div>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="120px" label="数据源名称" prop="dataName">
              <el-input v-model="formData.dataName" placeholder="请输入数据源名称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="120px" label="kafka服务IP" prop="kafkaIP">
              <el-input v-model="formData.kafkaIP" placeholder="请输入kafka服务IP" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="120px" label="kafka服务端口" prop="kafkaPort">
              <el-input v-model="formData.kafkaPort" placeholder="请输入kafka服务端口" clearable
                        :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="120px" label="kafka用户名" prop="kafkaUser">
              <el-input v-model="formData.kafkaUser" placeholder="请输入kafka用户名" clearable
                        :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div class="tips" name="email">网御星云防火墙</div>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="120px" label="数据源名称" prop="esName">
              <el-input v-model="formData.esName" placeholder="请输入数据源名称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="120px" label="ES服务IP" prop="esIP">
              <el-input v-model="formData.esIP" placeholder="请输入ES服务IP" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="120px" label="ES服务端口" prop="esPort">
              <el-input v-model="formData.esPort" placeholder="请输入ES服务端口" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="120px" label="ES用户名" prop="esUser">
              <el-input v-model="formData.esUser" placeholder="请输入ES用户名" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="ES密码" prop="esParssWord">
              <el-input v-model="formData.esParssWord" placeholder="请输入ES密码" clearable show-password
                        :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="索引名称" prop="keyName">
              <el-input v-model="formData.keyName" placeholder="请输入索引名称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
        </div>
      </el-form>

    </div>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  components: {},
  props: {
    title: {
      type: String,
      default() {
        return '编辑'
      }
    }
  },
  data() {
    return {
      isOpen: false,
      islink: 0,
      formData: {
        field101: undefined,
        field102: undefined,
        field103: undefined,
        field105: undefined,
        field106: undefined,
        field107: undefined,
        field108: undefined,
        field109: undefined,
        field111: 1,
        field112: undefined,
        field113: '您好',
        dataName: undefined,    // 输出网御星云防火墙
        kafkaIP: undefined,
        kafkaPort: undefined,
        kafkaUser: undefined,
        esName: undefined,
        esIP: undefined,
        esPort: undefined,
        esUser: 'admin',
        esParssWord: 'admin123',
        keyName: undefined
      },
      rules: {
        field110: [
          {
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }
        ],
        field101: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ],
        field102: [
          {
            required: true,
            message: '请输入发送邮件服务器',
            trigger: 'blur'
          }
        ],
        field103: [
          {
            required: true,
            message: '请输入发送邮件地址',
            trigger: 'blur'
          }
        ],
        field105: [
          {
            required: true,
            message: '请输入发送邮件端口',
            trigger: 'blur'
          }
        ],
        field106: [
          {
            required: true,
            message: '请输入发送邮件密码',
            trigger: 'blur'
          }
        ],
        field107: [
          {
            required: true,
            message: '请输入，多个用英文;隔开',
            trigger: 'blur'
          }
        ],
        field108: [
          {
            required: true,
            message: '请输入，多个用英文;隔开',
            trigger: 'blur'
          }
        ],
        field109: [
          {
            required: true,
            message: '请输入，多个用英文;隔开',
            trigger: 'blur'
          }
        ],
        field111: [],
        field112: [
          {
            required: true,
            message: '请输入，多个用英文;隔开标题',
            trigger: 'blur'
          }
        ],
        field113: [
          {
            required: true,
            message: '请输入正文',
            trigger: 'blur'
          }
        ]
      },
      field111Options: [
        {
          label: '及时发送模板',
          value: 1
        },
        {
          label: '定时发送模板',
          value: 2
        }
      ],
      dataName: [{
        required: true,
        message: '请输入数据源名称',
        trigger: 'blur'
      }],
      kafkaIP: [{
        required: true,
        message: '请输入kafka服务IP',
        trigger: 'blur'
      }],
      kafkaPort: [{
        required: true,
        message: '请输入kafka服务端口',
        trigger: 'blur'
      }],
      kafkaUser: [{
        required: true,
        message: '请输入kafka用户名',
        trigger: 'blur'
      }],
      esName: [{
        required: true,
        message: '请输入数据源名称',
        trigger: 'blur'
      }],
      esIP: [{
        required: true,
        message: '请输入ES服务IP',
        trigger: 'blur'
      }],
      esPort: [{
        required: true,
        message: '请输入ES服务端口',
        trigger: 'blur'
      }],
      esUser: [{
        required: true,
        message: '请输入ES用户名',
        trigger: 'blur'
      }],
      esParssWord: [{
        required: true,
        message: '请输入ES密码',
        trigger: 'blur'
      }]
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (valid) {
          this.$modal.msgSuccess('修改成功')
          this.isOpen = false
        }
      })
    },
    cancel() {
      this.isOpen = false
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog__body {
  padding: 0px !important;
}

.dia-form {
  //margin-left: 240px;
  padding: 24px 80px 24px 24px;
  width: 100%;
}

.email-dia {
  width: 100% !important;
}

.email-dia {
  display: flex;
  height: 540px;
  width: 100%;
  justify-content: space-between;
  width: 100vh;

  aside {
    padding: 0;
    margin-bottom: 0;
    width: 240px !important;
    background: #fff;
    border-right: 1px solid #e8e8e8;

    .option-group {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;

      li {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 15px 0 15px 24px;
        cursor: pointer;
        font-size: 14px;
        color: #303032;
        font-weight: 400;

        &.activeLink {
          border-right: 2px solid #2979ff;
          background: #dfecff;
          color: #2979ff;
        }
      }
    }
  }

  ::v-deep .el-tabs__item.is-active {
    background-color: #dfecff;
  }

  ::v-deep .el-tabs--left,
  .el-tabs--right {
    overflow: visible !important;
  }

  ::v-deep .el-tabs--left .el-tabs__nav-wrap.is-left::after {
    height: 500px;
  }

}

</style>
